<template>
  <div class="base-table">
    <el-table
      ref="table"
      v-loading="loading"
      :data="tableData"
      :border="tableConfig.border"
      style="width: 100%"
      :show-summary="tableConfig.amount"
      @selection-change="selectChange"
    >
      <!--表格中的多行选择框-->
      <el-table-column
        v-if="tableConfig.selection"
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        v-if="tableConfig.index"
        fixed="left"
        type="index"
        label="序号"
        align="center"
        width="70"
      />
      <el-table-column
        v-for="(item, index) in tableConfig.columnList"
        :key="index"
        :fixed="item.fixed"
        :prop="item.prop"
        :label="item.name"
        :width="item.width"
        :show-overflow-tooltip="true"
        :formatter="item.formatter || undefined"
        align="center"
        :sortable="item.sortable"
      >
        <template slot-scope="scope">
          <slot
            v-if="item.slot"
            :row="scope.row"
            :name="item.prop"
          />
          <template v-else>{{ scope.row[item.prop] }}</template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="m-center">
      <Pagination
        :total="tableConfig.total"
        :page.sync="tableConfig.page"
        :limit.sync="tableConfig.limit"
        @pagination="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
import Pagination from '../Pagination'
const defaultConfig = {
  total: 0,
  page: 1,
  limit: 10,
  pagination: true, // 是否分页
  selection: true, // 选择框
  index: true, // 序号
  border: true, // 边框
  amount: false, // 合计
  columnList: [] // 表格表头
}
export default {
  name: 'HlTable',
  components: {
    Pagination
  },
  props: {
    tableData: { // 表格数据
      type: Array,
      default: () => []
    },
    tabKey: {
      type: String,
      default: ''
    },
    config: { // 表格配置
      type: Object,
      default: () => {}
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableConfig: {
        ...defaultConfig,
        ...this.config
      }
    }
  },
  methods: {
    selectChange(selection) {
      this.$emit('handleSelect', selection)
    },
    handlePageChange(value) {
      this.$emit('handlePageChange', value)
    },
    tableLayout() {
      this.$refs['table'].doLayout()
    }
  }
}
</script>
